<template>
    <div class="drag-ball" ref="dragBall" @touchstart.stop.prevent="touchstart" @touchmove.stop.prevent="touchmove" @touchend.stop.prevent="touchend">
        <div class="drag-content">
            <!-- <van-icon name="plus" size="26" /> -->
            <img style="width:0.7rem;height:0.7rem;" src="../assets/img/add.png" />
        </div>
    </div>
</template>
<script setup>
import { toRefs, reactive, getCurrentInstance } from "vue";
const prototype = getCurrentInstance().appContext.config.globalProperties;
const emits = defineEmits(["change"]);

// 数据池
let state = reactive({
    canDrag: false,
    // 偏移
    inset: {
        left: 0,
        top: 0,
    },
    // 移动
    move: {},
    // 位置
    position: {
        left: 0,
        top: 0,
    },
    // 初始位置
    positionOld: {},
    startTime: null,
    endTime: null,

    dragBall: undefined,
});

function toNew() {
    alert("去新版");
}
function touchstart(e) {
    if (!state.canDrag) {
        state.startTime = e.timeStamp;
        state.positionOld = getPosition(state.dragBall);
        state.position = { ...state.positionOld };
        state.inset = {
            left: e.targetTouches[0].clientX - state.positionOld.left,
            top: e.targetTouches[0].clientY - state.positionOld.top,
        };
        state.canDrag = true;
    }
}
function touchmove(e) {
    if (state.canDrag) {
        let left = e.targetTouches[0].clientX - state.inset.left;
        let top = e.targetTouches[0].clientY - state.inset.top;
        if (left < 0) {
            left = 0;
        } else if (left > window.innerWidth - state.dragBall.offsetWidth) {
            left = window.innerWidth - state.dragBall.offsetWidth;
        }
        if (top < 0) {
            top = 0;
        } else if (top > window.innerHeight - state.dragBall.offsetHeight) {
            top = window.innerHeight - state.dragBall.offsetHeight;
        }
        state.dragBall.style.left = left + "px";
        state.dragBall.style.top = top + "px";
        state.move = {
            x: left - state.positionOld.left,
            y: top - state.positionOld.top,
        };
        state.position = { left, top };
    }
}
function touchend(e) {
    if (state.canDrag) {
        state.endTime = e.timeStamp;
        if (
            state.endTime - state.startTime > 400 ||
            Math.abs(state.move.x) > 2 ||
            Math.abs(state.move.y) > 2
        ) {
            // 非单击事件
            if (
                state.position.left + state.dragBall.offsetWidth / 2 >
                window.innerWidth / 2
            ) {
                state.dragBall.style.left =
                    window.innerWidth - state.dragBall.offsetWidth + "px";
            } else {
                state.dragBall.style.left = 0 + "px";
            }
        } else {
            emits("change");
        }
        state.inset = {};
        state.move = {};
        state.position = {};
        state.canDrag = false;
    }
}
// 获取dom的绝对位置
function getPosition(source) {
    let left = source.offsetLeft; //获取元素相对于其父元素的left值var left
    let top = source.offsetTop;
    let current = source.offsetParent; // 取得元素的offsetParent // 一直循环直到根元素
    while (current != null) {
        left += current.offsetLeft;
        top += current.offsetTop;
        current = current.offsetParent;
    }
    return {
        left: left,
        top: top,
    };
}

//数据绑定
const { dragBall } = toRefs(state);
</script>

<style scoped>
.drag-ball {
    position: absolute;
    z-index: 999;
    right: 2%;
    top: 70%;
    width: 100px;
    height: 100px;
    background: #337fff;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0px 0px 3px 1px skyblue;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}
.drag-ball .drag-content {
    overflow-wrap: break-word;
    font-size: 14px;
    color: #fff;
    letter-spacing: 2px;
    padding: 15px;
}
</style>